<template>
	<view class="page flex-col">
		<view class="box_1 flex-col">
			<view class="group_2 flex-col">
				<view class="section_4 flex-col"></view>
				<view class="text-wrapper_1 flex-row justify-between">
					<text class="text_4">反馈标题：</text>
					<input type="text" placeholder="请输入标题问题" v-model="data.title" class="text_5">
				</view>
				<text class="text_6">反馈内容：</text>
				<textarea class="paragraph_1" cols="30" rows="10" v-model="data.texts"
					placeholder="您好！为了更好的解决您的问题，请详细描述问题出现的原因！"></textarea>
				<button class="button_1 flex-col" @click="onClick_1">
					<text class="text_9">提交反馈</text>
				</button>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		onShow
	} from "@dcloudio/uni-app";
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from "vue"
	const {
		proxy
	} = getCurrentInstance()
	let data = ref({
		constants: {},
		title: '',
		texts: ''
	})

	const onClick_1 = () => {
		if (data.value.title == "") {
			uni.showToast({
				title: "请输入标题",
				icon: "none"
			})
		} else if (data.value.texts == "") {
			uni.showToast({
				title: "请输入反馈内容",
				icon: "none"
			})
		} else {
			proxy.$req.requestPOST(proxy.$api.SystemInfo.feedback, {
				title: data.value.title,
				content: data.value.texts
			}).then(res => {
				uni.showToast({
					title: res.message,
					icon: 'none'
				})
				if (res.flag == "success") {
					setTimeout(() => {
						uni.navigateBack({
							delta:2
						})
					}, 1500)
				}
			})
		}

	}
</script>
<style lang='css'>
	.page {
		background-color: rgba(255, 255, 255, 1);
		position: relative;
		width: 750rpx;
		/* height: 1624rpx; */
		overflow: hidden;
	}

	.box_1 {
		background-color: rgba(255, 255, 255, 1);
		width: 750rpx;
		/* height: 1624rpx; */
	}

	.group_1 {
		background-color: rgba(255, 255, 255, 0);
		width: 750rpx;
		height: 88rpx;
	}

	.text_1 {
		width: 56rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 34rpx 0 0 63rpx;
	}

	.text_2 {
		width: 5rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 28rpx;
		font-family: PingFangSC-;
		text-align: center;
		white-space: nowrap;
		line-height: 28rpx;
		margin: 37rpx 0 0 -36rpx;
	}

	.label_1 {
		width: 36rpx;
		height: 23rpx;
		margin: 35rpx 0 0 498rpx;
	}

	.label_2 {
		width: 32rpx;
		height: 22rpx;
		margin: 35rpx 0 0 8rpx;
	}



	.section_2 {
		background-color: rgba(19, 19, 19, 1);
		border-radius: 4px;
		width: 36rpx;
		height: 16rpx;
		margin: 4rpx 0 0 4rpx;
	}

	.group_2 {
		width: 750rpx;
		/* height: 1537rpx; */
		margin-bottom: 1rpx;
		padding-bottom: 1rem;
	}

	.section_3 {
		background-color: rgba(255, 255, 255, 0);
		width: 750rpx;
		height: 88rpx;
	}

	.image_1 {
		width: 15rpx;
		height: 28rpx;
		margin: 30rpx 0 0 40rpx;
	}

	.text_3 {
		width: 142rpx;
		height: 35rpx;
		color: rgba(51, 51, 51, 1);
		font-size: 36rpx;
		font-family: PingFangSC-;
		text-align: center;
		white-space: nowrap;
		line-height: 36rpx;
		margin: 27rpx 304rpx 0 249rpx;
	}

	.section_4 {
		background-color: rgba(248, 248, 248, 1);
		width: 750rpx;
		height: 2rpx;
	}

	.text-wrapper_1 {
		width: 399rpx;
		height: 30rpx;
		margin: 42rpx 0 0 35rpx;
	}

	.text_4 {
		width: 137rpx;
		/* height: 30rpx; */
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		margin-right: 20rpx;
		 line-height: 32rpx;
	}

	.text_5 {
		width: 412rpx;
		/* height: 28rpx; */
		color: black;
		font-size: 30rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 30rpx;

	}

	.text_6 {
		width: 138rpx;
		height: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		margin: 68rpx 0 0 34rpx;
	}

	.paragraph_1 {
		width: 92%;
		padding: 0 4%;
		height: 300rpx;
		color: black;
		font-size: 30rpx;
		text-align: left;
		line-height: 30rpx;
		margin-top: 30rpx;
	}

	.text-wrapper_2 {
		width: 399rpx;
		height: 30rpx;
		margin-left: 34rpx;
		margin-top: 30rpx;
	}

	.text_7 {
		width: 138rpx;
		height: 30rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		text-align: left;
		white-space: nowrap;
		/*  line-height: 32rpx; */
	}

	.text_8 {
		width: 411rpx;
		height: 29rpx;
		color: black;
		font-size: 30rpx;
		text-align: left;
		white-space: nowrap;
		line-height: 32rpx;
		margin-left: 30rpx;
	}

	.button_1 {
		height: 104rpx;
		background-color: #54BC6E;
		border-radius: 25rpx;
		width: 86%;
		margin-left: 7%;
		position: fixed;
		bottom: 30rpx;
	}

	.text_9 {
		width: 118rpx;
		height: 29rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 30rpx;
		font-family: PingFangSC-;
		text-align: center;
		white-space: nowrap;
		line-height: 30rpx;
		margin: 38rpx 0 0 236rpx;
	}

	.section_5 {
		background-color: rgba(0, 0, 0, 1);
		border-radius: 5px;
		width: 270rpx;
		height: 10rpx;
		margin: 48rpx 0 19rpx 240rpx;
	}
</style>